<style lang='scss'>
#base-info {
  .convert-dialog > .el-dialog {
    width: 1700px;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 190px
  }

  .el-textarea.is-disabled .el-textarea__inner,
  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
    border-color: #e4e7ed;
    color: #606266;
    cursor: not-allowed;
  }

  .form-table {
    .el-table__fixed-header-wrapper > table > thead > tr > th > .cell,
    .el-table__header-wrapper > table > thead > tr > th > .cell {
      padding: 10px 0;
      text-align: center;
      font-weight: bold;
    }
  }

  .el-table-column--selection > .cell {
    text-align: center;
  }
  .part {
    border: 1px solid #ccc;
    margin-bottom: 20px;
    background-color: #fff;
    .table-title {
      cursor: pointer;
      padding: 10px;
      display: flex;
      align-items: center;
      background-color: #f5f5f5;
    }
  }
  .mt15 {
    margin-top: 15px;
  }

  .button-box {
    text-align: center;
    padding: 20px;
    background-color: #fff;
  }
}
</style>
<template>
  <div id="base-info">
    <Box>

    <SearchContainer>
      <el-form :inline="true" label-width="110px" :model="searchForm" class="query-form mb20">
        <el-form-item label="名称" prop="path">
          <el-input v-model="searchForm.name" placeholder="请输入名称" auto-complete="off"></el-input>
        </el-form-item>
        <div class='mb20 tc'>
          <el-button type="primary" size="small" icon="el-icon-search" @click="onSearch()">查询</el-button>
          <el-button type="success" size="small" icon="el-icon-plus" @click="addItem({key:'list'})">新增</el-button>
          <el-button type="warning" size="small" icon="el-icon-refresh" @click="searchForm={}">重置</el-button>
        </div>
      </el-form>
    </SearchContainer>
    <el-form :model="modifyForm" :rules="modifyFormRules" ref="modifyForm" :label-position="'' | LABEL_POSITION">
      <el-table
        v-loading="regionLoading"
        element-loading-spinner="el-icon-loading"
        :data="modifyForm.list"
        border
        class="form-table"
        :max-height="maxHeight"
        @selection-change="handleSelectionChange">
        <!-- <el-table-column v-if="type !='view'" type="selection" width="55" class="tc"></el-table-column> -->
        <el-table-column label="handlerName" min-width="200">
          <template slot-scope="scope">
            <el-form-item :prop=" 'list.'  + scope.$index + '.handlerName' " :rules="modifyFormRules.handlerName" class="mt15" v-if="scope.row.editStatus">
              <el-input :disabled="!scope.row.editType" v-model="scope.row.handlerName" placeholder="请输入"></el-input>
            </el-form-item>
            <span  v-else :title="scope.row.handlerName">{{scope.row.handlerName}}</span>
          </template>
        </el-table-column>

        <el-table-column label="产品描述" min-width="200">
          <template slot-scope="scope">
            <el-form-item :prop=" 'list.' + scope.$index + '.desc' " :rules="modifyFormRules.desc" class="mt15" v-if="scope.row.editStatus">
              <el-input
                type="textarea"
                :readonly="type == 'view'"
                :autosize="{ minRows: 1, maxRows: 1}"
                v-model="scope.row.desc"
                placeholder="请输入描述"
              ></el-input>
            </el-form-item>
            <span v-else :title="scope.row.desc">{{scope.row.desc}}</span>
          </template>
        </el-table-column>

        <el-table-column label="application" min-width="180">
          <template slot-scope="scope">
            <el-form-item :prop=" 'list.' +scope.$index + '.application' " :rules="modifyFormRules.application" class="mt15" v-if="scope.row.editStatus">
              <el-input :readonly="type == 'view'" v-model="scope.row.application" placeholder="请输入"></el-input>
            </el-form-item>
            <span v-else :title="scope.row.application">{{scope.row.application}}</span>
          </template>
        </el-table-column>

        <el-table-column label="handlerClass" min-width="300">
          <template slot-scope="scope">
            <el-form-item :prop=" 'list.' +scope.$index + '.handlerClass' " :rules="modifyFormRules.handlerClass" class="mt15" v-if="scope.row.editStatus">
              <el-input :readonly="type == 'view'"    type="textarea" autosize v-model="scope.row.handlerClass" placeholder="请输入"></el-input>
            </el-form-item>
            <span v-else :title="scope.row.handlerClass"> {{scope.row.handlerClass}}</span>
          </template>
        </el-table-column>

        <el-table-column label="author" min-width="100">
          <template slot-scope="scope">
            <el-form-item :prop=" 'list.' +scope.$index + '.author' " :rules="modifyFormRules.author" class="mt15" v-if="scope.row.editStatus">
              <el-input :readonly="type == 'view'" v-model="scope.row.author" placeholder="请输入"></el-input>
            </el-form-item>
            <span v-else :title="scope.row.author">{{scope.row.author}}</span>
          </template>
        </el-table-column>

        <el-table-column label="regDate" min-width="200">
          <template slot-scope="scope">
            <el-form-item :prop=" 'list.' +scope.$index + '.regDate' " :rules="modifyFormRules.regDate" class="mt15" v-if="scope.row.editStatus">
              <el-date-picker type="date" :readonly="type == 'view'" v-model="scope.row.regDate" placeholder="请选择"></el-date-picker>
            </el-form-item>
            <span v-else>{{scope.row.regDate}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-col>
              <el-button type="text" @click="editRow(scope.row)" v-if="!scope.row.editStatus">编辑</el-button>
              <el-button type="text" @click="onSubmitForm({index:scope.$index,row:scope.row})" v-if="scope.row.editStatus">保存</el-button>
              <el-button v-if="!scope.row.editStatus" type="text" @click="onDelRecord({index:scope.$index,row:scope.row})">删除</el-button>
              <el-button v-else type="text" @click="cancelEdit(scope.$index,scope.row)">取消</el-button>
              
              <!-- <el-button @click="modifyDialogVisible = false;">返回</el-button> -->
            </el-col>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-row v-if="type != 'view'">
        <el-col :span="24" class="button-box">
          <el-button type="success" @click="addItem({key:'list'})">新增Item</el-button>
          <el-button :disabled="selection.length == 0" type="warning" @click="delItem({key:'list',findKey:'application'})">删除Item</el-button>
        </el-col>
      </el-row>-->
    </el-form>
    <el-pagination
      v-if="this.pager.total > 0 "
      :page-sizes="pagination.pageSizes"
      :page-size="pager.pageSize"
      :layout="pagination.layout"
      :total="pager.total"
      :current-page="pager.pageIndex"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <!-- <el-row>
      <el-col :span="24" class="button-box">
        <el-button type="primary" @click="onSubmitForm">{{type == 'view' ? '编辑' : '保存'}}</el-button>
        <el-button type="danger" v-if=" type != 'view' " @click="onSubmitForm">删除</el-button>
        <el-button @click="modifyDialogVisible = false;">返回</el-button>
      </el-col>
    </el-row>-->
    </Box>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapState, mapMutations } from "vuex";
import SearchContainer from "src/components/common/SearchContainer";
import storage from "src/utils/storage";
import { copyJSONObj, sendReq, tableExportExcel, isJSON ,GetQueryString } from "src/utils/tools";


let handlerListItem = {
  desc: '',
  handlerName: '',
  application: '',
  handlerClass: '',
  author: '',
  regDate: '',
  editType: 'add',
  editStatus:true
};


export default {
  data() {
    const pagePermissionsMenu = storage.get("pagePermissionsMenu")
      ? storage.get("pagePermissionsMenu")
      : {};

    const inputWarning = (msg) => {

      return [
        {
          required: true,
          message: msg,
          trigger: "blur,change",
        }
      ];
    };

    let modifyFormRules = {};
    for (let key in handlerListItem) {
      if (key == 'regDate') {
        modifyFormRules[key] = inputWarning(`请选择${key}`);
      } else {
        modifyFormRules[key] = inputWarning(`请输入${key}`);
      }
    }

    return {
      type: 'edit',
      // -60 - 30 - 25
      searchForm: {},
      zkConfigTypeEnum: "",
      maxHeight: document.documentElement.clientHeight - 90 - 110 - 75,
      modifyForm: {
        list: [copyJSONObj(handlerListItem)],
      },
      modifyFormRules: modifyFormRules,
      selection: [],
      pager: {
        total: 0,
        pageIndex: 1,
        paeSize: 20,
      },
      currentEditData:null
    };
  },
  components: {
    SearchContainer
  },
  computed: {
    ...mapGetters(["pagination", "regionLoading", 'valveOpts'])
  },
  watch: {},
  created() {

  },
  mounted() {
    this.onSearch();
  },
  methods: {
    ...mapActions([""]),
    editRow(row){
      row.editStatus = true;
      this.currentEditData = JSON.parse(JSON.stringify(row));
    },
    cancelEdit(index,row){
      if(row.editType && row.editType == "add"){
        this.modifyForm.list.splice(index, 1);
      }else{
        this.currentEditData = JSON.parse(JSON.stringify(row));
        this.currentEditData.editStatus = false;
        this.$set(this.modifyForm.list,index,this.currentEditData);
      }
    },
    onSearch() {
      let pages = {
        pageNum: this.pager.pageIndex,
        pageSize: this.pager.pageSize,
      }
      sendReq({
        url: '/config/getHandlerList',
        params: { 
          nodeName: this.searchForm.name,
          ...pages 
        },
        showLoading: true,
        cb: (returnData) => {
         
          if (returnData.data) {
            returnData.data.forEach( e => {
              e.editStatus = false
            })
            this.zkConfigTypeEnum = returnData.zkConfigTypeEnum;
            this.modifyForm.list = returnData.data || [];
            this.pager.total = returnData.totalRecord;
          }
        }
      })
    },
    handleSelectionChange(selection) {
      this.selection = selection;
      // console.log(selection);
    },
    addItem(obj) {
      this.modifyForm[obj.key].unshift(copyJSONObj(handlerListItem))
    },
    delItem(obj) {
      this.$confirm("确定要取消这条记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.modifyForm[obj.key].splice(obj.index, 1);
      })
    },
    //新增&&编辑保存
    onSubmitForm(obj) {

      let row = obj.row;
      // return console.log(row);

      let args = {};

      args = {
        url: row.editType ? '/config/addNode' : '/config/updateNode',
        params: {
          productCode: this.$route.params.productCode,
          name: row.handlerName,
          content: row,
          zkConfigTypeEnum: this.zkConfigTypeEnum,

        }
      };


      sendReq({
        url: args.url,
        params: args.params,
        note: true,
        cb: (data) => {
          this.onSearch();
        }
      })

      // if (this.type == 'view') {
      //   this.type = 'edit';
      //   return;
      // }

      // let params = {
      //   type: this.type,
      // };

      // this.$refs.modifyForm.validate(valid => {
      //   if (valid) {

      //     this.$confirm("确定要提交数据吗?", "提示", {
      //       confirmButtonText: "确定",
      //       cancelButtonText: "取消",
      //       type: "warning"
      //     }).then(() => {


      // sendReq({
      //   url: '/config/updateNode',
      //   params: { path: obj.row.path, content: obj.row },
      //   note: true,
      //   cb: (data) => {
      //     this.onSearch();
      //   }
      // })


      //     })

      //   } else {
      //     this.$message({
      //       type: "warning",
      //       message: "请检查表单必填项!"
      //     });
      //   }
      // });
    },
    // 删除
    onDelRecord(params) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        sendReq({
          url: '/config/deleteNode',
          params: { path: params.row.path },
          note: true,
          cb: (data) => {
            this.onSearch();
          }
        })
      })
    },
    handleSizeChange(pageSize) {
      this.pager.pageSize = pageSize;
      this.onSearch();
    },
    handleCurrentChange(pageIndex) {
      this.pager.pageIndex = pageIndex;
      this.onSearch();
    },
  }
};
</script>
